<template>
	<view class="page" catchtouchmove="true">
		<view class="welcome">
			<image class="welcome_img" src="../../static/img/welcome.png" mode=""></image>
		</view>
		<view class="interval"></view>
		<view class="inp">
			<view class="inpOne">
				<u-field
					class="fieldOne"
					v-model="formData.account_number"
					label="账号"
					:border-bottom="false"
					placeholder-style="color:#FFFFFF"
					placeholder="请输入账号"
				>
				</u-field>
			</view>
		</view>
		<view class="intervalTwo"></view>
		<view class="inp_tow">
			<view class="inpTwo">
				<u-field
					class=""
					v-model="formData.password"
					type="password"
					label="密码"
					:border-bottom="false"
					placeholder-style="color:#FFFFFF"
					placeholder="请输入密码"
				>
				</u-field>
			</view>
		</view>
		<view class="login" v-if="formData.account_number=='' || formData.password==''" @click="submit">
			<span class="login_text">登录</span>
		</view>
		<view class="loginTwo" v-else @click="submit">
			<span class="login_text">登录</span>
		</view>
		<view class="assistant">
			<span class="assistant_text">【AI党建助手为您服务】</span>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			formData:{
				account_number:'',
				password:'',
			}
		}
	},
  onShow(){
    this.checkLogin();
  },
	mounted() {

	},
	methods:{
    checkLogin(){
      let loginToken = uni.getStorageSync('loginToken');
      if(loginToken){
        uni.redirectTo({
          url:'/pages/programme/set'
        })
      }
    },
		async submit(){
			if(this.formData.account_number=='' || this.formData.password==''){
				uni.showToast({
				    title: '账号或密码不能为空',
				    duration: 2000,
					icon:'none'
				});
			}else{
        let params={
          'username':this.formData.account_number,
          "password":this.formData.password
        }
        let res=await this.$api.deviceLogin(params)
        if(res.data.level == "success"){
          uni.setStorageSync('loginToken',res.data.data);
          uni.setStorageSync('loginUser',this.formData.account_number);
          uni.showToast({
            title: '登录成功',
            duration: 2000,
          });
          setTimeout(() =>{
            uni.redirectTo({
              url:'/pages/programme/set'
            })
          },2100)
        }else{
          uni.showToast({
            title:res.data.message,
            icon:'none'
          })
        }
				
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.page{
		background-color: #fdc986;
		min-height: 100vh;
		overflow: hidden;
	}
	.welcome{
		margin-top: -5rpx;
	}
	.welcome_img{
		width: 100%;
		height: 200rpx;
	}
	.interval{
		margin-top: 200rpx;
	}
	.intervalTwo{
		margin-top: 50rpx;
	}
	.inp{
		display: flex;
		justify-content: center;
		margin: 0 auto;
		border-radius: 20rpx;
		align-items: center;
		background-color: #7F090B;
		height: 110rpx;
		width: 90%;
	}
	.inp_tow{
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		margin: 0 auto;
		border-radius: 20rpx;
		align-items: center;
		background-color: #7F090B;
		height: 110rpx;
		width: 90%;
	}
	.inpOne{
		border: #EBB17E solid 1rpx;
		width: 97%;
		border-radius: 10rpx;
	}
	.inpTwo{
		border: #EBB17E solid 1rpx;
		width: 97%;
		border-radius: 10rpx;
		
	}
	.fieldOne{
		color: #FFC695;
		font-size: 18rpx;
	}
	.login{
		background-image: url(../../static/img/login_img.png);
		background-repeat: no-repeat;
		height: 120rpx;
		background-size: 100% 100%;
		width: 90%;
		margin: 0 auto;
		margin-top: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loginTwo{
		background-image: url(../../static/img/login_imgTwo.png);
		background-repeat: no-repeat;
		height: 120rpx;
		background-size: 100% 100%;
		width: 90%;
		margin: 0 auto;
		margin-top: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.login_text{
		color: #FFD4A5;
		font-weight: 600;
		font-size: 40rpx;
	}
	.assistant{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	.assistant_text{
		color: #7F090B;
		font-size: 30rpx;
	}
</style>
<style>
	.u-label-text{
		color: #FFC695;
		font-weight: 600;
		font-size: 28rpx;
	}
	.u-flex-1{
		color: #FFFFFF;
	}
</style>
